전남대 FE_이도현_2주차 과제 #19
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 10 commits
July 2, 2024 15:34
tlsehdfl
reviewed
Jul 5, 2024
|
|
||
| import React from 'react'; | ||
|
|
||
| const Footer: React.FC = () => ( |
src/components/GiftRanking.tsx
Outdated
| } | ||
|
|
||
| const GiftRanking: React.FC = () => { | ||
| const [filter, setFilter] = useState<string>('all'); |
There was a problem hiding this comment.
filter 타입이 정해져있는데 string 보다는 type 으로 지정하는게 type narrowing 측면에서 낫습니다.
src/components/GiftRanking.tsx
Outdated
|
|
||
| const GiftRanking: React.FC = () => { | ||
| const [filter, setFilter] = useState<string>('all'); | ||
| const [subFilter, setSubFilter] = useState<string>('wanted'); |
src/components/GiftRanking.tsx
Outdated
| {['all', 'women', 'men', 'teenagers'].map((category) => ( | ||
| <div key={category} className={`button-container ${filter === category ? 'active' : ''}`} onClick={() => handleFilterChange(category)}> | ||
| <button> | ||
| <span>{category === 'all' ? 'ALL' : category === 'women' ? '👩🏻🦳' : category === 'men' ? '👨🏻🦳' : '👦🏻'}</span> |
There was a problem hiding this comment.
불필요한 삼항 연산자는 가독성을 떨어뜨립니다.
객체로 이를 대체할 수 있습니다.
// e.g.
const CATEGORY = {
all: 'ALL',
women: '👩🏻🦳',
men: '👨🏻🦳',
};
<span>{CATEGORY[category] || '👦🏻'}</span>
src/components/GiftRanking.tsx
Outdated
| <button> | ||
| <span>{category === 'all' ? 'ALL' : category === 'women' ? '👩🏻🦳' : category === 'men' ? '👨🏻🦳' : '👦🏻'}</span> | ||
| </button> | ||
| <span className="category">{category === 'all' ? '전체' : category === 'women' ? '여성이' : category === 'men' ? '남성이' : '청소년이'}</span> |
There was a problem hiding this comment.
피드백해주셔서 감사합니다.
말씀하신 부분은 수정 완료했습니다.
GiftRanking 이외에 부분은 따로 수정할 부분은 없을까요?
There was a problem hiding this comment.
피드백해주셔서 감사합니다. 말씀하신 부분은 수정 완료했습니다. GiftRanking 이외에 부분은 따로 수정할 부분은 없을까요?
추가로 남겨드린 피드백만 반영해주시면 따로 없을거 같아요 !
refactor : filter와 subFilter 타입을 string에서 타입으로 변경 refactor : 카테고리와 서브카테고리 라벨을 객체로 대체
tlsehdfl
reviewed
Jul 8, 2024
|
|
||
| return ( | ||
| <> | ||
| <Header /> |
There was a problem hiding this comment.
Header, Footer 등 반복되는 컴포넌트는 Layout 으로 구성할 수 있을거 같습니다.
아래 참고 하셔서 Layout 컴포넌트로 구성해보실 수 있을거 같아요.
ref. https://reactrouter.com/en/main/components/outlet
| ); | ||
| }; | ||
|
|
||
| export default App; | ||
| const ApplicationRoutes = () => { |
There was a problem hiding this comment.
Routes 는 별도의 컴포넌트로 작성해서 App.tsx 에서 import 하도록 변경하는게 가독성 측명에서 더 나을거 같습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
base repository 변경을 안해서 다시보냅니다!